<template>
  <page-view class="page-view" :title="false">
    <div slot="headerContent">
      <a-breadcrumb class="s-breadcrumb">
        <a-breadcrumb-item>学生征信</a-breadcrumb-item>
        <a-breadcrumb-item><nuxt-link to="/blacklist/blacklistIndex">学生征信</nuxt-link></a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <!-- 查询和其他操作 -->
    <a-card class="s-card">
      <div class="filter">
        <a-form>
          <a-row>
            <a-col :lg="8" :md="12" :sm="24">
              <a-form-item label="年级">
                <a-select v-model="listQuery.gradeId" placeholder="请选择">
                  <a-select-option
                    v-for="item in departmentList"
                    :key="item.deptId"
                    :value="item.deptId"
                  >
                    {{ item.deptName }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :lg="8" :md="12" :sm="24">
              <a-form-item label="失信人名">
                <a-input
                  v-model="listQuery.studentName"
                  clearable
                  class="filter-item"
                  style="width: 200px;"
                  placeholder="请输入"
                />
              </a-form-item>
            </a-col>
            <a-col :lg="8" :xs="0">
              <a-button
                type="primary"
                @click="handleFilter"
              >查找
              </a-button>
              <a-button @click="handleReset">重置</a-button>
              <a-button
                :loading="downloadLoading"
                type="primary"
                @click="handleDownload"
              >导出表格
              </a-button>
            </a-col>
          </a-row>
          <!-- 适配小屏幕 -->
          <a-row>
            <a-col :lg="24" :md="24" :sm="24">
              <a-button
                type="primary"
                @click="handleEdit"
              ><a-icon type="plus" />
                新增失信人
              </a-button>
            </a-col>
          </a-row>
          <a-row>
            <a-col :lg="0" :md="12" :sm="24">
              <a-button
                type="primary"
                @click="handleFilter"
              >查找
              </a-button>
              <a-button @click="handleReset">重置</a-button>
              <a-button
                :loading="downloadLoading"
                type="primary"
                @click="handleDownload"
              >导出表格
              </a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div>
        <!-- 查询结果 -->
        <a-table
          :loading="listLoading"
          class="s-table"
          bordered
          :data-source="list"
          :row-key="record => record.id"
          :locale="{ emptyText: '无符合筛选条件的筛选项，请重新筛选！' }"
          :pagination="false"
        >
          <a-table-column
            title="序号"
            data-index="index"
            class="index-td"
            align="center"
          />
          <a-table-column
            title="失信人姓名"
            data-index="studentName"
            align="center"
          />
          <a-table-column
            title="失信人编号"
            data-index="studentNo"
            align="center"
          />
          <a-table-column
            title="所属年级"
            data-index="gradeName"
            align="center"
          />
          <a-table-column
            title="列入时间"
            data-index="createdTime"
            align="center"
          />
          <a-table-column
            title="失信原因"
            data-index="reason"
            class="textarea-td"
          />
          <!-- fixed="right"-->
          <a-table-column
            key="action"
            title="操作"
            align="center"
          >
            <template slot-scope="text, record">
              <span class="primary-link" @click="handleDelete(record)">移除</span>
            </template>
          </a-table-column>

        </a-table>
        <!-- 分页器 -->
        <div class="pagination-container">
          <a-pagination
            :page-size="listQuery.pageSize"
            :show-total="total => `共 ${total} 条记录 第 ${listQuery.page} / ${Math.ceil(total / listQuery.pageSize)} 页`"
            :current="listQuery.page"
            :total="total"
            hide-on-single-page
            show-quick-jumper
            @change="getList"
          />
        </div>
      </div>
      <BlacklistSave
        v-if="edit"
        ref="BlacklistSave"
        :data="editForm"
        @refreshDataList="edit = false || getList()"
        @dialogClosed="edit = false"
      />
    </a-card>
  </page-view>
</template>
<style lang="less" scoped>
  .index-td{
    width: 70px;
  }
  .textarea-td{
    width: 31%;
  }
</style>
<script>

import { STable, PageView } from '@/components'
import { del } from '@/pages/blacklist/api/blacklist'
import BlacklistSave from '@/pages/blacklist/BlacklistSave'

export default {
  name: 'BlacklistIndex',
  components: {
    STable,
    PageView,
    BlacklistSave
  },
  data () {
    return {
      url: '/admin/studentBlacklist/page',
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        pageSize: 20
      },
      editForm: {},
      edit: false,
      downloadLoading: false,
      departmentList: []
    }
  },
  // watch: {
  //   listQuery: {
  //     handler: function (val, oldval) {
  //       this.getList()
  //     },
  //     deep: true // 对象内部的属性监听，也叫深度监听
  //   }
  // },
  mounted () {
    this.$gradeListFunc().then(data => {
      this.departmentList = data
    })
    this.getList()
  },
  methods: {
    getList (page) {
      this.listQuery.page = page || this.listQuery.page
      this.$fetchList()
    },
    handleFilter () {
      this.listQuery.page = 1
      this.getList()
    },
    handleReset () {
      this.listQuery = {
        page: 1,
        pageSize: 20
      }
    },
    handleDownload () {
      // this.downloadLoading = true
      // import('@/vendor/Export2Excel').then(excel => {
      //   const tHeader = ['排序', '产品名称', '默认产品单价', '发布人', '发布时间', '状态']
      //   const filterVal = ['sort', 'productName', 'defaultPrice', 'publishTime', 'status']
      //   excel.export_json_to_excel2(tHeader, this.list, filterVal, '产品信息')
      //   this.downloadLoading = false
      // })
    },
    handleEdit (row) {
      this.edit = true
      this.editForm = {}
    },
    handleDelete (row) {
      this.$handleBtnClick(del, row.id, '此操作将移除该数据, 是否继续?')
    }
  }
}
</script>
